<template>
	<!-- 添加或修改菜单对话框 -->
	<div>
		<el-dialog v-model="visible" :title="!form.menuId ? '新增' : '修改'" append-to-body>
			<el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="菜单类型" prop="menuType">
							<el-radio-group v-model="form.menuType" size="small">
								<el-radio-button label="0">左菜单</el-radio-button>
								<el-radio-button label="1">按钮</el-radio-button>
								<el-radio-button label="2">顶菜单</el-radio-button>
								<el-radio-button label="3">隐藏菜单</el-radio-button>
								<el-radio-button label="4">外部菜单</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="上级菜单">
							<!-- <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" /> -->
							<treeselect
								v-model="form.parentId"
								:options="menuOptions"
								placeholder="选择上级菜单"
								:objMap="{
									label: 'name',
									value: 'id',
									children: 'children',
								}"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item v-if="form.menuType !== '1'" label="图标" prop="icon">
					<avue-input-icon v-model="form.icon" :icon-list="iconList"></avue-input-icon>
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入菜单名称" />
				</el-form-item>
				<el-form-item v-if="form.menuType !== '1'" label="路由地址" prop="path">
					<el-input v-model="form.path" placeholder="请输入路由地址" />
				</el-form-item>
				<el-form-item v-if="form.menuType === '1'" label="权限标识" prop="permission">
					<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="排序" prop="sortOrder">
							<el-input-number v-model="form.sortOrder" controls-position="right" :min="0" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-if="form.menuType !== '1'" label="路由缓冲" prop="keepAlive">
							<el-radio-group v-model="form.keepAlive">
								<el-radio-button label="0">否</el-radio-button>
								<el-radio-button label="1">是</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="dataFormSubmit">确 定</el-button>
					<el-button @click="visible = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { addObj, fetchMenuTree, getObj, putObj } from '@/api/admin/menu';
// import Treeselect from '@riophae/vue-treeselect';
import Treeselect from '@/components/TreeSelect/index.vue';
import iconList from '@/config/icon-list';
// import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { ref, reactive, onMounted, nextTick } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();

const $emit = defineEmits<{
	(e: 'refreshDataList'): void;
}>();

const dataForm = ref();

// 遮罩层
const loading = ref(true);
// 菜单树选项
const menuOptions = ref<any[]>([]);
// 是否显示弹出层
const visible = ref(false);
// 图标
// const	iconList = ref(iconList);
const form = ref<anyObj>({
	menuId: undefined,
	name: undefined,
	path: undefined,
	icon: undefined,
	permission: undefined,
	menuType: '0',
	keepAlive: '0',
	sortOrder: 999,
});
// 表单校验
const rules = reactive<anyObj>({
	name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
	sortOrder: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
	path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
	keepAlive: [{ required: true, message: '路由缓冲不能为空', trigger: 'blur' }],
	permission: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
});
function init(isEdit: any, id: any) {
	if (id !== null) {
		form.value.parentId = id;
	}
	visible.value = true;
	getTreeselect();
	nextTick(() => {
		dataForm.value?.resetFields();
		if (isEdit) {
			getObj(id).then((res: ApiResponse) => {
				form.value = res.data;
			});
		} else {
			form.value.menuId = undefined;
		}
	});
}
// 表单提交
function dataFormSubmit() {
	console.log('form.value', form.value);
	dataForm.value?.validate((valid: any) => {
		if (valid) {
			if (form.value.parentId === undefined) {
				form.value.parentId = -1;
			}

			if (form.value.menuId) {
				putObj(form.value).then((data) => {
					proxy.$message.success('修改成功');
					visible.value = false;
					$emit('refreshDataList');
				});
			} else {
				addObj(form.value).then((data) => {
					proxy.$message.success('添加成功');
					visible.value = false;
					$emit('refreshDataList');
				});
			}
		}
	});
}
/** 查询菜单下拉树结构 */
function getTreeselect() {
	fetchMenuTree().then((response: ApiResponse) => {
		menuOptions.value = [];
		const menu = { id: -1, name: '根菜单', children: [] };
		menu.children = response.data;
		menuOptions.value.push(menu);
	});
}
/** 转换菜单数据结构 */
function normalizer(node: any) {
	if (node.children && !node.children.length) {
		delete node.children;
	}
	return {
		id: node.id,
		label: node.name,
		children: node.children,
	};
}
defineExpose({
	init,
});
</script>
